<script setup>
import { useRouter } from 'vue-router/composables'
import dayjs from 'dayjs'
import { useOrderFromStore } from '@/stores/orderFrom'
import { Toast } from 'vant'
import { disposeOrderCreate } from '@/apis/order.js'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { usePermissionStore } from '@/stores/permission.js'
const { isCreateRole } = usePermissionStore()
const router = useRouter()
const { formInfo } = useOrderFromStore()

const showPicker = ref(false)
const orderInputRef = ref('')

const state = reactive({
  maxDate: new Date(),
  maxHour: new Date().getHours(),
  maxMinute: new Date().getMinutes(),
  currentDate: new Date(),
  rules: {
    title: [{ required: true, message: '请输入标题!' }],
    content: [{ required: true, message: '请输入内容!' }],
    author: [{ required: true, message: '请输入发布人!' }],
    publishTimeMillis: [{ required: true, message: '请选择发布时间!' }],
    fans: [{ required: true, message: '请输入粉丝量!' }],
    url: [{ required: true, message: '请输入原文链接!' }],
    forwardCount: [{ required: true, message: '请输入转发量!' }],
    thumbsCount: [{ required: true, message: '请输入点赞量!' }],
    commentCount: [{ required: true, message: '请输入评论量!' }],
    plyCount: [{ required: true, message: '请输入播放量!' }],
    viewCount: [{ required: true, message: '请输入阅读量!' }]
  }
})

// 发布时间选择
const onConfirm = (time) => {
  formInfo.twoFormField.publishTimeMillis =
    dayjs(time).format('YYYY-MM-DD HH:mm')
  showPicker.value = false
}

// 表单提交保存
const formOnSubmit = async () => {
  orderInputRef.value
    .validate()
    .then(async () => {
      if (
        formInfo.twoFormField.attachmentList &&
        formInfo.twoFormField.attachmentList.length
      ) {
        formInfo.twoFormField.attachmentList =
          formInfo.twoFormField.attachmentList?.map((item) => ({
            url: item.url,
            originalName: item.originalName
          }))
      }
      const date = new Date(formInfo.twoFormField.publishTimeMillis)
      formInfo.twoFormField.publishTimeMillis = date.getTime()
      const res = await disposeOrderCreate({
        ...formInfo.twoFormField,
        ...formInfo.firstFormField
      })
      if (res.ret === 0) {
        await router.replace('/workOrder/formMsg?orderNo=' + res.data)
      } else {
        Toast(res.msg)
      }
    })
    .catch((error) => {
      Toast(error[0].message)
    })
}

// 跳转到上一步
const goBack = () => {
  router.replace('/workOrder/form')
}

onMounted(async () => {
  if (!isCreateRole) {
    Toast('账号没有操作权限！')
    await router.replace('/home')
    return
  }
  console.log(
    formInfo.twoFormField.attachmentList,
    'formInfo.twoFormField.attachmentList'
  )
})
</script>

<template>
  <section class="w-full p-0 pt-64px direction-column min-h-screen bg-#F8F9FC">
    <div
      class="bg-white shadow-[10px_0_16px_0_rgba(0,0,0,0.06)] z-10 absolute top-0 left-0 h-56px w-full box-border flex items-center px-16px"
    >
      <span class="text-#229F60 text-20px font-400 leading-20px pr-3px pb-3px">
        2
      </span>
      <span class="text-#54565C text-16px font-400 leading-20px pr-10px">
        / 2
      </span>
      <span class="text-#1E2226 text-16px font-600 leading-20px">
        舆情基本信息
      </span>
    </div>
    <van-form
      ref="orderInputRef"
      @submit="formOnSubmit"
      scroll-to-error
      :show-error-message="false"
      validate-first
      class="pb-85px"
    >
      <van-field
        v-model="formInfo.twoFormField.title"
        :rules="state.rules.title"
        name="title"
        label="标题"
        required
        input-align="right"
        placeholder="请输入"
      />
      <div class="bg-white mb-10px">
        <CustomTextarea
          required
          label="内容"
          :modelValue.sync="formInfo.twoFormField.content"
          :rules="state.rules.content"
        />
      </div>
      <van-field
        v-model="formInfo.twoFormField.author"
        :rules="state.rules.author"
        name="author"
        required
        label="发布人"
        input-align="right"
        placeholder="请输入"
      />

      <van-field
        readonly
        required
        clickable
        name="publishTimeMillis"
        :value="formInfo.twoFormField.publishTimeMillis"
        :rules="state.rules.publishTimeMillis"
        label="发布时间"
        input-align="right"
        placeholder="请选择"
        @click="showPicker = true"
      />

      <van-field
        v-model="formInfo.twoFormField.fans"
        :rules="state.rules.fans"
        name="fans"
        required
        type="digit"
        label="发布人粉丝量"
        input-align="right"
        label-class="!w-96px"
        placeholder="请输入"
      />
      <div class="bg-white mt-10px">
        <CustomTextarea
          required
          label="原文链接"
          :modelValue.sync="formInfo.twoFormField.url"
          :rules="state.rules.url"
        />
      </div>
      <van-field
        v-model="formInfo.twoFormField.forwardCount"
        name="forwardCount"
        label="转发量"
        type="digit"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="formInfo.twoFormField.thumbsCount"
        name="thumbsCount"
        label="点赞量"
        type="digit"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="formInfo.twoFormField.commentCount"
        name="commentCount"
        label="评论量"
        type="digit"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="formInfo.twoFormField.plyCount"
        name="plyCount"
        label="播放量"
        type="digit"
        input-align="right"
        placeholder="请输入"
      />
      <van-field
        v-model="formInfo.twoFormField.viewCount"
        name="viewCount"
        type="digit"
        label="阅读量"
        input-align="right"
        placeholder="请输入"
      />
      <div class="px-16px mt-8px bg-white">
        <DetailItem label="附件" top>
          <FileList
            removable
            :upload="true"
            :preview="true"
            :files.sync="formInfo.twoFormField.attachmentList"
            :imageMax="9"
            :otherMax="0"
          >
            <template #empty="{ handleUpload }">
              <div class="h-80px w-80px" @click="handleUpload">
                <UploadTrigger icon-size="7vw" />
              </div>
            </template>
          </FileList>
        </DetailItem>
      </div>
    </van-form>
    <div
      class="absolute bottom-0 w-full flex justify-between items-center px-16px py-8px box-border bg-white"
      style="margin-top: 20px"
    >
      <van-button
        color="#36B374"
        size="normal"
        @click="goBack"
        style="margin: 0 10px 0 0"
        plain
        >上一步</van-button
      >
      <van-button
        type="primary"
        native-type="submit"
        class="flex-1"
        size="normal"
        @click="formOnSubmit"
        >提 交</van-button
      >
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="datetime"
        title="发布时间"
        v-model="state.currentDate"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        :max-date="state.maxDate"
        :max-hour="state.maxHour"
        :max-minute="state.maxMinute"
      />
    </van-popup>
  </section>
</template>

<style scoped lang="less">
:deep(.van-cell::after) {
  right: 0;
  left: 0;
}
.field-container {
  display: flex;
  flex-direction: column;
  &:deep(.van-cell) {
    flex-direction: column;
    margin-top: 10px;
    .van-field__label {
      width: 100%;
      height: 35px;
    }
    .van-field__value {
      padding: 5px;
      background: #f8f9fb;
    }
  }
  &.uploaders {
    :deep(.van-field__value) {
      padding: 5px;
      background: none !important;
    }
  }
}

.van-cell--required {
  &::before {
    content: '';
  }
  &:deep(.van-cell__title) {
    span::after {
      position: relative;
      right: -2px;
      top: 0;
      color: #ee0a24;
      content: '*';
    }
  }
}
.spansg::after {
  position: absolute;
  right: 1px;
  color: #ee0a24;
  font-size: 3.733vw;
  content: '*';
}
.field-label {
  margin-bottom: 8px; /* 调整标签和输入框之间的间距 */
}
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-button--plain.van-button--primary {
  color: #07c160;
}

.van-button--plain {
  background-color: #fff;
}
</style>
